<template>
    <div>
        <el-dialog :title="props.isAdd ? '添加菜单' : '编辑菜单'" v-model="props.isShow" center :before-close="beforeClose">
            <el-form :model="menuForm" :rules="rules" ref="menuRef">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="menuForm.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="menuForm.pid" class="m-2" placeholder="Select" size="large" @change="changePid">
                        <el-option :value="0" label="顶级菜单"></el-option>
                        <el-option v-for="item in store.getters['menu/getMenu']" :key="item.id" :label="item.title"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth">
                    <el-radio-group v-model="menuForm.type">
                        <el-radio disabled :label="1" size="large">目录</el-radio>
                        <el-radio disabled :label="2" size="large">菜单</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单图标" :label-width="formLabelWidth" v-if="menuForm.type == 1">
                    <el-select v-model="menuForm.icon" placeholder="请选择图标">
                        <el-option v-for="item in iconlist" :key="item" :label="item" :value="item">
                            <el-icon>
                                <component :is="item"></component>
                            </el-icon>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
                    <el-select v-model="menuForm.url" placeholder="请选择">
                        <el-option v-for="item in IndexRouter" :key="item.path" :label="item.meta.title" :value="item.path">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="menuForm.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel(menuRef)">取消</el-button>
                    <el-button type="primary" @click="sure(menuRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang='ts' setup>
//引入方法
//引入菜单地址，让其保持与路由地址一致
import { IndexRouter } from '../../router'
import { defineProps, defineEmits, ref, reactive, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { menuAdd, menuEdit, menuInfo } from '../../request/api'
import {useStore} from 'vuex'
let store = useStore()

//id的值先为0
var newId = 0

//父传子 接收数据
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})

//子传父
let emit = defineEmits(['cancel'])

//表单对象
let menuForm = ref({
    pid: 0,//上级分类编号  注意：顶级菜单-0number
    title: '',//菜单名称string
    icon: '',//图标string
    type: 1,//类型 1目录2菜单number
    url: '',//菜单地址string
    status: 1,//状态   1正常2禁用   number类型number
})

//封装一个确定事件
let menuRef = ref<FormInstance>()

//icon图标数据
const iconlist = ['Tools', 'GoodsFilled', 'Handbag', 'Setting']

//改变菜单选项
const changePid = () => {
    menuForm.value.type = menuForm.value.pid == 0 ? 1 : 2
}

//封装一个数据回显
const lookup = (id: number) => {
    menuInfo({ id }).then((res:any) => {
        // console.log(id);    
        menuForm.value = res.list
        // menuForm.value.id = id
        // console.log(res);
        newId = id
    })
}

//关闭x事件
const beforeClose = (done: any) => {
    done()
    cancel(menuRef.value)
}
//封装一个取消事件
const cancel = (formEl?: FormInstance | undefined) => {
    emit('cancel', false)
    if (!formEl) return
    menuForm.value = {
        pid: 0,//上级分类编号  注意：顶级菜单-0number
        title: '',//菜单名称string
        icon: '',//图标string
        type: 1,//类型 1目录2菜单number
        url: '',//菜单地址string
        status: 1,//状态   1正常2禁用   number类型number
    }
    //清除表单验证
    formEl.resetFields()
}

const sure = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val) => {
        if (val) {
            console.log(menuForm.value, '表单对象');
            if (props.isAdd) {
                menuAdd(menuForm.value).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        store.dispatch('menu/getMenuListAction')
                        cancel(formEl)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                menuEdit({ ...menuForm.value, id: newId }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                        store.dispatch('menu/getMenuListAction')
                        cancel(formEl)
                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            }
        }
    })
}

const formLabelWidth = '120px'

//规则验证
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 8, message: '长度为2-8个字符', trigger: 'blur' },
    ],
    pid: [
        {
            required: true,
            message: '请选择上级菜单',
            trigger: 'change',
        }
    ]
})

defineExpose({
    lookup
})

</script>
<style lang='less' scoped></style>